<template>
  <div class="resume_header">
    <span>HR管理</span>
    <el-button type="primary" class="addJob_btn" @click="handleAdd()">添加HR</el-button>
  </div>
  <div class="resume_center">
    
    <el-table :data="filterTableData.slice((page - 1) * limit,page*limit)" style="width: 100%" height="400px" size="large" >
      <el-table-column label="HR姓名" prop="hrName"/>
      <el-table-column label="HR级别" prop="hrLevel"/>
      <el-table-column label="HR电话" prop="hrPhone"/>
      <el-table-column label="HR邮箱" prop="hrEmail"/>
      
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="default" placeholder="搜索" />
        </template>
        <template #default="scope">
          <el-button size="default" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="default" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination :page="page" :limit="limit" :handleSizeChange="handleSizeChange" :handleCurrentChange="handleCurrentChange" :filterTableData="filterTableData" :pagesizes="pagesizes" />
    </div>

  </div>
  <el-drawer ref="drawerRef" v-model="dialog" :title="drawerTitle" :before-close="handleClose" direction="rtl"
    custom-class="demo-drawer">
    <div class="demo-drawer__content">
      <el-form :model="drawerForm">
        <el-form-item label="HR姓名" :label-width="formLabelWidth">
          <el-input v-model="drawerForm.hrName" autocomplete="off" />
        </el-form-item>

        <el-form-item label="HR级别" :label-width="formLabelWidth">
          <el-select placeholder="请选择" v-model="drawerForm.hrLevel"  >
            <el-option label="人事经理" value="人事经理" />
            <el-option label="人事主管" value="人事主管" />
            <el-option label="人事专员" value="人事专员" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="HR电话" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="drawerForm.hrPhone"   />
        </el-form-item>
        <el-form-item label="HR邮箱" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="drawerForm.hrEmail"   />
        </el-form-item>

      </el-form>
      <div class="demo-drawer__footer">
        <el-button @click="cancelForm">取消</el-button>
        <el-button type="primary" :loading="loading" @click="onClick">{{
        loading ? '正在提交 ...' : '提交'
        }}</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script lang='ts' setup>

import { elmessage } from "@/hook/hook"
import { ElDrawer, ElMessageBox } from 'element-plus'
import { computed, ref, onMounted, reactive, watch, isProxy, toRef, toRefs } from 'vue'
import { useStore } from "vuex"
import Pagination from "@/components/Pagination.vue"
const store = useStore()


// 编辑岗位信息--抽屉
const formLabelWidth = '80px'
let timer: any

const dialog = ref(false)
const loading = ref(false)

const drawerForm = reactive({
  hrId:"",
  hrName: '',
  hrPhone: '',
  hrLevel: '',
  hrEmail: '',
})

const drawerTitle=ref("")

const drawerRef = ref<InstanceType<typeof ElDrawer>>()
  // 将编辑好的内容提交
const onClick = async() => {
  // 添加HR是没有hrId的
  if (drawerForm.hrId==""){
   console.log("我想添加HR");
   store.commit("addEHRs",drawerForm)
   
  }else{
    // 若不为空则是编辑数据
    store.commit("upEHRs",drawerForm)
  }
  drawerRef.value!.close()
}

const handleClose = (done: any) => {
  drawerRef.value!.close()
  
}

const cancelForm = () => {
  loading.value = false
  dialog.value = false
  clearTimeout(timer)

  
}

function handleAdd(){
  dialog.value = true
  drawerTitle.value="添加岗位"

  drawerForm.hrId =""
  drawerForm.hrName =""
  drawerForm.hrPhone = ""
  drawerForm.hrLevel = ""
  drawerForm.hrEmail = ""

}

// 表格数据定义

interface User {
  hrId: string
  hrName: string
  hrPhone: string
  hrLevel: string
  hrEmail: string
}
const tableData: User[] = reactive([])

const search = ref('')
const filterTableData = computed(() =>
  tableData.filter(
    (data) =>
      !search.value ||
      // 通过岗位名称筛选
      // data.name.toLowerCase().includes(search.value.toLowerCase())
      data.hrName.toLowerCase().indexOf(search.value.toLowerCase()) !== -1
  )
)
const handleEdit = (index: number, row: User) => {
  drawerTitle.value="编辑岗位信息"
  dialog.value = true
  drawerForm.hrId = row.hrId
  drawerForm.hrName = row.hrName
  drawerForm.hrPhone = row.hrPhone
  drawerForm.hrLevel = row.hrLevel
  drawerForm.hrEmail = row.hrEmail
}

// 删除在招职位
const handleDelete = (index: number, row: any) => {
  // console.log(row.jobId.length);
  if(row.jobId.length>0){
    elmessage("该HR未交接完工作，无法删除", "warning")
  }else{
    store.commit("deleteEHRs", row)
    tableData.splice(index, 1)
  }
}




// 初始化和过滤表格内容
function pushTableData() {
  
  if (tableData.length != 0) {
    tableData.forEach((value, index, self) => {
      for (let i = 0; i < store.state.enterpriseState.EHRs.length; i++) {
        if (value.hrId !== store.state.enterpriseState.EHRs[i].hrId) {
          tableData.push(store.state.enterpriseState.EHRs[i])
        }
      }
    })
    // tableData = reactive(tableData.filter((value, index, self) => {
    //   return self.indexOf(value) === index
    // }))

    // console.log(isProxy(tableData));


  } else {
    for (let i = 0; i < store.state.enterpriseState.EHRs.length; i++) {
      tableData.push(store.state.enterpriseState.EHRs[i])
    }
  }
}

const watchHRs = computed(() => store.state.enterpriseState.EHRs)
watch(watchHRs, (newval, oldval) => {
  pushTableData()
}, { immediate: true, deep: true })


// 分页器
const page = ref(1)
const pagesizes=ref([1,2,3,4,10, 20, 30, 40])
const limit = ref(10)

const handleSizeChange = (val: number) => {
  // pushTableData()
  limit.value=val
  page.value=1

}
const handleCurrentChange = (val: number) => {
  page.value=val
  // pushTableData()
}


onMounted(() => {

  // pushTableData()

})


</script>
<style scoped>
.pagination{
  float: right;
  margin-right: 50px;
  /* right: 150px; */
}
  
  .addJob_btn{
    margin-right: 100px;
    /* float: right;
    right: 100px; */
   /* margin-left: 700px; */
  }
.resume_center {
  font-family: '微软雅黑';
  height: 800px;
  background-color: #FFF;
}

.resume_header {
  background-color: rgb(215, 215, 215);
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  justify-content: space-between;

}

a {
  text-decoration: none;
  color: #000;
}
</style>